<template>
  <view class="categroy">
    <YgSearch></YgSearch>
    <view class="main">
      <!-- 左侧标题 -->
      <view class="title_left">
        <view @click="handleTitle(index)" :class=" index===current?'title_item active':'title_item'" v-for="(item,index) in cateTitle" :key="item">{{item}}</view>
      </view>
      <!-- 右侧内容 -->
      <view class="goods_right">
        <view class="goods_item" v-for="item1 in goodsDetail" :key="item1.cat_id">
          <view class="goods_title">{{item1.cat_name}}</view>
          <view class="goods_group">
            <navigator class="goods_detail" v-for="item2 in  item1.children" :key="item2.cat_id"  :url="'/pages/goods_list/goods_list?cid='+item2.cat_id">
              <u-image class="uimg u-flex u-row-center"  :src="item2.cat_icon" width="120" height="120"></u-image>
              <view class="good_text">{{item2.cat_name}}</view>
            </navigator>
          </view>
          
        </view>
      </view>
    </view>
  </view>
</template>

<script>
let goodsCate
export default {
  data(){
    return{
      cateTitle:[],
      goodsDetail:[],
      current:0
    }
  },
  async onLoad(){
    const cateDetail=uni.getStorageSync('cateDetail')
    if(!cateDetail){
      console.log('没有缓存的时候');
      this.setStorage()
    }else{
      if(Date.now()-cateDetail.time>1000*6){
        console.log('超时');
        this.setStorage()
      }else{
        goodsCate=cateDetail.data
        this.cateTitle=goodsCate.map(i=>i.cat_name)
        this.goodsDetail=goodsCate[0].children
      }
    }
  },
  methods:{
    async setStorage(){
      const res = await this.$u.get('/categories')
      goodsCate=res.message
      // console.log(goodsCate);
      this.cateTitle=goodsCate.map(i=>i.cat_name)
      // console.log(this.cateTitle);
      this.goodsDetail=goodsCate[0].children
      // console.log(this.goodsDetail);
      uni.setStorageSync('cateDetail',{data:goodsCate,time:Date.now()})
    },
    handleTitle(index){
      this.goodsDetail=goodsCate[index].children
      this.current=index
    }
  }
}
</script>

<style lang="scss" scoped>
.categroy{
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.main{
  flex: 1;
  display: flex;
  overflow: hidden;
  .title_left{
    width: 182rpx;
    overflow: auto;

    .title_item{
      flex: 1;
      height: 100rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .active{
      border-left: 2px solid #eb4450;
    }
  }
  .goods_right{
    flex: 1;
    overflow: auto;
    .goods_item{
      .goods_title{
        text-align: center;
        height: 100rpx;
        line-height: 100rpx;
        &::before{
          content: '/';
          margin-right: 10rpx ;
        }
        &::after{
          content: '/';
          margin-left: 10rpx ;
        }
      }
      .goods_group{
        display: flex;
        flex-wrap: wrap;
        .goods_detail{
          // flex: 1;
          width: 33.33%;
        }
        .good_text{
          text-align: center;
        }
      }
    }
  }
}
</style>